<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addMeun('', 0)"
        v-permission="['permissions@save']"
        >{{ $t("menu.menu1") }}</el-button
      >
      <!-- 添加目录 -->
    </div>
    <el-table
      ref="table"
      border
      highlight-current-row
      :data="dataList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="id"
      v-permission="['permissions@index']"
    >
      <!-- 菜单标题 -->
      <el-table-column
        show-overflow-tooltip
        :label="$t('menu.menu2')"
        width="180px"
        prop="permission_name"
      >
        <template slot-scope="scope">{{
          $store.state.settings.langTail == "zh"
            ? scope.row.permission_name
            : scope.row['permission_name_'+$store.state.settings.langTail]
        }}</template>
      </el-table-column>
      <!-- 图标 -->
      <el-table-column
        prop="icon"
        :label="$t('openPreparation.openPreparation3')"
        align="center"
        width="60px"
      >
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
        </template>
      </el-table-column>
      <!-- 权限标识 -->
      <el-table-column
        show-overflow-tooltip
        prop="permission_mark"
        :label="$t('menu.menu3')"
        minWidth="180px"
      />
      <!-- 组件路径 -->
      <el-table-column
        show-overflow-tooltip
        prop="component"
        :label="$t('menu.menu4')"
        minWidth="120px"
      />
      <!-- <el-table-column prop="keepalive" label="缓存" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.keepalive">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="hidden" label="可见" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.hidden">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column> -->
      <!-- 创建时间 -->
      <el-table-column prop="created_at" :label="$t('vip.vip4')" width="160px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created_at, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        :label="$t('common.common15')"
        fixed="right"
        min-width="140px"
        class-name="iconBtn"
        v-if="
          checkPermission([
            'permissions@save',
            'permissions@read',
            'permissions@delete',
          ])
        "
      >
        <template slot-scope="scope">
          <div>
            <span
              @click="addMeun(scope.row.id.toString(), 1)"
              v-show="scope.row.type != 2"
              v-permission="['permissions@save']"
            >
              <!-- 添加下级 -->
              <btn-tip
                :content="$t('common.common37')"
                type="primary"
                icon="el-icon-circle-plus-outline"
              ></btn-tip>
            </span>
            <span
              @click="
                addMeun(
                  scope.row.id.toString(),
                  scope.row.type.toString(),
                  'edit'
                )
              "
              v-permission="['permissions@read']"
            >
              <!-- 编辑 -->
              <btn-tip
                :content="$t('common.common20')"
                type="success"
                icon="el-icon-edit"
              ></btn-tip>
            </span>
            <span
              @click="delBtn(scope.row.id)"
              v-show="scope.row.type == 2"
              v-permission="['permissions@delete']"
            >
              <!-- 删除 -->
              <btn-tip
                :content="$t('common.common9')"
                type="danger"
                icon="el-icon-delete"
              ></btn-tip>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <meunAddEDitVue ref="meunInfo"></meunAddEDitVue>
  </el-card>
</template>

<script>
import { getMenus, delBtn } from "@/api/system/menu";
import meunAddEDitVue from "@/components/system/meunAddEDit.vue";
import { parseTime } from "@/utils/index";
import store from "@/store";
export default {
  components: {
    meunAddEDitVue,
  },
  inject: ["reload"],
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    getList() {
      getMenus().then((res) => {
        this.dataList = res.data;
      });
    },
    meunList() {
      // this.reload();
    },
    addMeun(id, type, status) {
      this.$refs.meunInfo.init(id, type, status);
    },
    delBtn(id) {
      let _this = this;
      // 确定删除？
      _this
        .$confirm(this.$t("common.common10"), {
          type: "warning",
          closeOnClickModal: false,
        })
        .then((_) => {
          delBtn(id)
            .then((res) => {
              if (res.code == 10000) {
                _this.getList();
              }
            })
            .catch((error) => {
              _this.$message.error(error.Error);
            });
        })
        .catch((_) => {});
    },
  },
};
</script>
